<template>
  <el-card shadow="never">
    <template #header>
      <el-link
        class="mt-2"
        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/editor"
        target="_blank"
      >
        代码位置 src/views/editor
      </el-link>
      <br /><br />
      富文本编辑器非常多，技术选型比较困难，因此这里列出我接触过的所有富文本编辑器以便比较
    </template>
    <div class="description">
      <!-- https://uutool.cn/tinymce/ -->
      <dl>
        <dt>
          <el-link
            href="https://www.tiny.cloud/docs/demo/full-featured/"
            target="_blank"
          >
            TinyMCE
          </el-link>
        </dt>
        <dd>
          <p>
            TinyMCE是一个开源的所见即所得的HTML编辑器，界面相当清新，界面模拟本地软件的风格，顶部有菜单栏。支持图片在线处理，插件多，功能非常强大，易于集成，并且拥有可定制的主题。支持目前流行的各种浏览器，它可以达到微软Word类似的编辑体验。
          </p>
          <p>
            使用的第一款富文本编辑器，开源免费，功能强大，目前一直有人维护，这款编辑器使用的人非常多。
          </p>
        </dd>
        <dt>
          <el-link href="https://ckeditor.com/" target="_blank">
            CKEditor
          </el-link>
        </dt>
        <dd>
          <p>
            CKEditor也是一款非常经典的富文本编辑器，官方下载量过千万。它是在非常著名的FCkEditor基础上开发的新版本，FckEditor的用户现在基本都转移到CKEditor了。
          </p>
          <p>
            CKEditor有高性能的实时预览，它特有行内编辑功能，使得编辑内容更加直观，仿佛是在编辑网页一样，有很强的可扩展性，被各大网站广泛运用。
          </p>
        </dd>
        <dt>
          <el-link href="http://kindeditor.net/demo.php" target="_blank">
            KindEditor
          </el-link>
        </dt>
        <dd>
          KindEditor历史也很长了，用户数也不少，国内某公司出品。免费开源。界面类似于office
          word，界面和功能中规中矩，文档齐全，使用还算方便。
        </dd>
        <dt>
          <el-link href="http://ueditor.baidu.com/website/" target="_blank">
            UEditor
          </el-link>
        </dt>
        <dd>
          <p>
            UEditor是由百度出品的富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源免费。这款编辑器用过的人也非常多，功能非常全面，插件很多，还可以很方便插入百度地图，接入十分简单。
          </p>
          <p>
            16年之后百度没有怎么更新了，不过现有的功能也足够用了。UEditor分为UE版（全功能版）和UM版（精简版），大家可以根据自己使用环境选择不同的版本。
          </p>
        </dd>

        <dt>
          <el-link href="https://www.wangeditor.com/" target="_blank">
            wangEditor
          </el-link>
        </dt>
        <dd>
          wangEditor轻量级，小巧实用，配置方便，使用简单。可以自定义皮肤功能，免费开源。用户数量也很多，尤其是用在一些轻型环境，比如论坛社区回帖。wangEditor是国人出品的开源项目。
        </dd>
        <dt>
          <el-link href="https://quilljs.com/" target="_blank"> Quill </el-link>
        </dt>
        <dd>
          Quill是轻型的编辑器，样式一般（黑白风），功能中等，它的代码高亮功能比较强，同样支持行内编辑模式，工具条可自定义。
        </dd>
      </dl>
      总结： TinyMCE 和 CKEditor
      是功能最为强大的编辑器，适合需要复杂文本编辑功能的大型应用，但代价是较大的文件体积和较高的学习曲线。
      KindEditor 和 wangEditor
      适合需要简单文本编辑功能的轻量级应用，特别是中文环境，但功能相对有限。
      UEditor
      在中文支持和功能丰富度方面表现出色，适合国内开发者，但在性能和国际化支持上略显不足且不再维护和社区支持。
      Quill
      适合现代化的应用，提供了良好的性能和扩展性，但功能较少，需要开发者自行添加所需功能。
      更多富文本编辑器请见：https://www.jb51.net/softjc/927195.html
    </div>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          <el-link
            href="https://www.tiny.cloud/docs/demo/full-featured/"
            target="_blank"
          >
            TinyMCE
          </el-link>
          <p style="margin-top: 20px">
            本人使用过的第一款富文本编辑器，功能性第一梯队，免费开源（7以上版本商业项目需要购买license_key：见
            <el-link
              href="https://www.tiny.cloud/docs/tinymce/latest/license-key/"
              target="_blank"
            >
              https://www.tiny.cloud/docs/tinymce/latest/license-key/ </el-link
            >）。这里使用的版本是 6.8.4，通过 @tinymce/tinymce-vue
            简化TinyMCE在vue中使用。(需要解压public/libs/tinymce.rar到tinymce目录，因为文件太多关联git会很慢)
          </p>
        </span>
      </div>
    </template>
    <el-collapse v-model="activeNames1" accordion>
      <el-collapse-item title="基础用法" name="1">
        <TEditorBase v-if="activeNames1 === '1'" v-model="content" />
      </el-collapse-item>
    </el-collapse>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          <el-link href="http://kindeditor.net/demo.php" target="_blank">
            KindEditor
          </el-link>
          <p style="margin-top: 20px">
            本人使用过的第二款富文本编辑器，功能性比起TinyMCE略差，但是中文支持好，有完整的中文文档。
            是我目前唯一深入研究过底层源码实现的编辑器，其不依赖任何第三方库，通过对DOM和选区操作实现的文本编辑。
            当时选用该富文本编辑器是由于其兼容性最好，可支持<el-link
              href="https://www.npmjs.com/package/@coremail/kindeditor"
              target="_blank"
              >IE6</el-link
            >，且中文文档支持友好。 (目前其<el-link
              href="https://github.com/kindsoft/kindeditor"
              target="_blank"
              >Github仓库</el-link
            >已在2024年1月9日归档，后续不知道官方是否继续更新)。
            这里使用的是版本是4.1.12，因为npm仓库里面只有一个版本4.1.10，其里面存在很多变量未定义的错误。
            当前版本图片上传也会存在 length 错拼写成了 lenth
            导致的变量未定义错误，感觉作者不是很用心（其官网demo也是如此，只是因为允许在非严格模式下因此不会报错。PS:
            严格模式通过引入更多的错误检查和限制，帮助开发者编写更健壮和安全的代码。尽管严格模式的约束较多，但在开发新项目时，推荐始终使用严格模式。）。
          </p>
        </span>
      </div>
    </template>
    <el-collapse v-model="activeNames2" accordion>
      <el-collapse-item title="基础用法" name="1">
        <KEditorBase v-if="activeNames2 === '1'" v-model="content" />
      </el-collapse-item>
    </el-collapse>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          <el-link href="http://ueditor.baidu.com/website/" target="_blank">
            UEditor
          </el-link>
          <p style="margin-top: 20px">
            国内最早知名的富文本编辑器（我所知最早），由百度开发的开源富文本编辑器。由于该项目很早就停止维护，不支持通过npm包的方式集成，只能通过下载源码通过script导入的方式集成。
            这里使用的版本是 6.8.4，通过 @tinymce/tinymce-vue
            简化TinyMCE在vue中使用。(需要解压public/libs/tinymce下的压缩包，因为文件太多关联git会很慢)
            为了与vue集成简化使用，这里采用
            <el-link
              href="https://github.com/haochuan9421/vue-ueditor-wrap"
              target="_blank"
            >
              vue-ueditor-wrap </el-link
            >进行整合使用（该插件包只能全局引入，不能只在一个组件内引入）
            (需要解压public/libs/ueditor.rar到ueditor目录，因为文件太多关联git会很慢)
          </p>
        </span>
      </div>
    </template>
    <el-collapse v-model="activeNames3" accordion>
      <el-collapse-item title="基础用法" name="1">
        <UEditorBase v-if="activeNames3 === '1'" v-model="content" />
      </el-collapse-item>
    </el-collapse>
  </el-card>
  <el-card shadow="never">
    <template #header>
      <div class="card-header">
        <span class="font-medium">
          <el-link href="https://www.wangeditor.com" target="_blank">
            Wangeditor
          </el-link>
        </span>
      </div>
    </template>
    <el-collapse v-model="activeNames" accordion>
      <el-collapse-item title="基础用法" name="1">
        <EditorBase v-if="activeNames === '1'" />
      </el-collapse-item>
      <el-collapse-item title="多个富文本" name="2">
        <EditorMulti v-if="activeNames === '2'" />
      </el-collapse-item>
      <el-collapse-item title="自定义图片上传" name="3">
        <EditorUpload v-if="activeNames === '3'" />
      </el-collapse-item>
    </el-collapse>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { EditorBase, EditorMulti, EditorUpload } from "./components";
import { EditorBase as TEditorBase } from "./components/tinymce";
import { EditorBase as KEditorBase } from "./components/kindeditor";
import { EditorBase as UEditorBase } from "./components/ueditor";

defineOptions({
  name: "Editor"
});

const content = ref("我是一段示例内容！我是一段示例内容！我是一段示例内容！");
const activeNames = ref("");
const activeNames1 = ref("");
const activeNames2 = ref("");
const activeNames3 = ref("");
</script>

<style lang="scss" scoped>
a {
  color: #0969da;
  text-decoration: none;
}

.description {
  line-height: 2;
}

dl {
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  background: #cccccc73;

  dt {
    font-weight: bold;
  }
}

.el-card {
  margin-bottom: 10px;
}

:deep(.el-collapse-item__header) {
  padding-left: 10px;
}
</style>
